define([
  'text!templates/map/controls/toolsBar.html',
], function (HTMLTemplate) {

    var view = Backbone.View.extend({
        el: $("#main-content"),
        render: function () {

            var template = Handlebars.compile(HTMLTemplate);
            var html = template();
            this.$el.html(html);

            this.addHandlers();


        },
        addHandlers: function () {
            var _this = this;

            // utils handlers
            $(".leaflet-toolbar .btn-toolbar button.utils").click(function () {
                var sel = $(this).hasClass("selected");
                var key = $(this).attr("data-action");
                var onoff = 1;

                if (sel) {
                    $(this).removeClass("selected");
                    onoff = 0;
                } else {
                    $(this).addClass("selected");
                }

                $("#projectmap").trigger("setTool", [key, onoff]);
            });

        },
        updateTools: function (ruler, info, label) {
            $(".leaflet-toolbar .btn-toolbar button.utils").removeClass("selected");
            // No utilizare la regla
            if (ruler)
                $(".leaflet-toolbar .btn-toolbar button.utils[data-action='ruller']").addClass("selected");
            if (info)
                $(".leaflet-toolbar .btn-toolbar button.utils[data-action='info']").addClass("selected");
            if (label)
                $(".leaflet-toolbar .btn-toolbar button.utils[data-action='labels']").addClass("selected");
        }

    });
    return view;
});